
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屈宇轩的烟花爱心</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 设置画布大小为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 粒子数组
        let particles = [];
        const particleCount = 500;
        const name = "屈宇轩";

        // 爱心形状函数
        function heartShape(t, scale) {
            scale = scale || 10;
            return {
                x: 16 * Math.pow(Math.sin(t), 3) * scale,
                y: -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)) * scale
            };
        }

        // 粒子类
        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 5 + 2;
                this.baseX = x;
                this.baseY = y;
                this.density = (Math.random() * 30) + 1;
                this.color = `hsl(${Math.random() * 60 + 330}, 100%, 50%)`;
                this.distance = 0;
                this.character = name.charAt(Math.floor(Math.random() * name.length));
                this.angle = 0;
            }

            update() {
                // 让粒子有呼吸效果
                this.angle += 0.05;
                this.size = Math.sin(this.angle) * 2 + 3;

                // 计算与鼠标的距离
                let dx = mouse.x - this.x;
                let dy = mouse.y - this.y;
                this.distance = Math.sqrt(dx * dx + dy * dy);

                // 粒子运动逻辑
                let forceDirectionX = dx / this.distance;
                let forceDirectionY = dy / this.distance;
                let maxDistance = 100;
                let force = (maxDistance - this.distance) / maxDistance;

                if (force < 0) force = 0;

                let directionX = forceDirectionX * force * this.density;
                let directionY = forceDirectionY * force * this.density;

                if (this.distance < maxDistance) {
                    this.x -= directionX;
                    this.y -= directionY;
                } else {
                    if (this.x !== this.baseX) {
                        let dx = this.x - this.baseX;
                        this.x -= dx / 20;
                    }
                    if (this.y !== this.baseY) {
                        let dy = this.y - this.baseY;
                        this.y -= dy / 20;
                    }
                }
            }

            draw() {
                ctx.fillStyle = this.color;
                ctx.font = `${this.size}px Arial`;
                ctx.fillText(this.character, this.x, this.y);
            }
        }

        // 鼠标位置
        let mouse = {
            x: null,
            y: null
        };

        // 鼠标移动事件
        window.addEventListener('mousemove', function(event) {
            mouse.x = event.x;
            mouse.y = event.y;
        });

        // 窗口大小改变时调整画布
        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

        // 初始化粒子
        function init() {
            particles = [];

            // 创建爱心形状的粒子
            for (let i = 0; i < particleCount; i++) {
                let t = Math.PI * 2 * i / particleCount;
                let heart = heartShape(t, 10);
                let x = canvas.width / 2 + heart.x;
                let y = canvas.height / 2 + heart.y;
                particles.push(new Particle(x, y));
            }
        }

        // 动画循环
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }

            // 随机添加一些烟花效果
            if (Math.random() < 0.03) {
                createFirework();
            }

            requestAnimationFrame(animate);
        }

        // 创建烟花效果
        function createFirework() {
            const fireworkParticles = 30;
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height / 2;

            for (let i = 0; i < fireworkParticles; i++) {
                const angle = Math.random() * Math.PI * 2;
                const speed = Math.random() * 5 + 2;
                const size = Math.random() * 4 + 2;
                const color = `hsl(${Math.random() * 360}, 100%, 50%)`;

                particles.push({
                    x: x,
                    y: y,
                    size: size,
                    color: color,
                    speedX: Math.cos(angle) * speed,
                    speedY: Math.sin(angle) * speed,
                    life: 100,
                    character: name.charAt(Math.floor(Math.random() * name.length)),
                    update: function() {
                        this.x += this.speedX;
                        this.y += this.speedY;
                        this.speedY += 0.1; // 重力
                        this.life--;
                        this.size *= 0.99;
                    },
                    draw: function() {
                        if (this.life > 0) {
                            ctx.fillStyle = this.color;
                            ctx.font = `${this.size}px Arial`;
                            ctx.fillText(this.character, this.x, this.y);
                        }
                    }
                });
            }
        }

        init();
        animate();
    </script>
</body>
</html>
